<template>
  <div class="app-container">
    <el-row>
      <el-upload
        class="upload-demo"
        :action="base_api"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :on-success="handleSuccess"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-row>

    <el-row>
      <el-table
        :data="history"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="create_at"
          label="日期"
          width="280"
        />
        <el-table-column
          prop="name"
          label="批次"
          width="380"
        />
        <el-table-column
          prop="product_count"
          label="产品数量"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleProducts(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </div>

</template>

<script>
import { GetBatchs } from '@/api/erp/crawlproduct'

export default {
  data() {
    return {
      fileList: [],
      base_api: '',
      history: []
    }
  },
  created() {
    this.base_api = process.env.VUE_APP_BASE_API + '/erp/api/batchimport/'
    GetBatchs().then((response) => {
      this.history = response.data
    })
    console.log(this.VUE_APP_BASE_API)
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleSuccess() {
      GetBatchs().then((response) => {
        this.history = response.data
      })
    },
    handleProducts(row) {
      this.$router.push({ name: 'batchprocess', params: { b_id: row.id }, query: { t: +new Date() }})
      console.log(row)
    }
  }
}
</script>

<style scoped>

</style>
